<meta charset="UTF-8">
<script src="./dome1.js"></script>
<style>
    body {
        background:url(./img/山水画.webp) center no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;

    }

    .big {
        text-align: center;
    }

    ul {
        /* background-color: khaki; */
        display: inline;
    }

    li {
        width: 280px;
        height: 40px;
        background-color: #b1b47f76;
        text-align: center;
        margin: 20px 0;
        line-height: 40px;
        list-style: none;
        font-size: 18px;
        border-radius: 8px;
    }
    li:first-child{
        font-size: 22px;
        font-weight: bold;
    }

    .box {
        pointer-events: none;
        width: 80px;
        height: 34px;
        background-color: #000;
        position: absolute;
        color: #ccc;
        display: none;
        border-radius: 8px;
        text-align: center;
        line-height: 34px;
    }

    .son {
        width: 0;
        height: 0;
        border-top: 7px solid black;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid transparent;
        position: absolute;
        top: 30px;
        left: 40%;
        transform: translateX(-50%);
    }
</style>
<div class="big">
    <ul>
        <li>《送孟浩然之广陵》</li>
        <li>故人西辞黄鹤楼，</li>
        <li>烟花三月下扬州。</li>
        <li>孤帆远影碧空尽，</li>
        <li>唯见长江天际流。</li>
    </ul>
</div>
<div class="box">诗人李白
    <div class="son"></div>
</div>
</div>
<script>
var liObjs = document.querySelectorAll('li')
liObjs.forEach(fun()) 
</script>
